<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>changePwd</title>
    <script src="js/jquery2.1.4.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/bootstrap3.3.7.js"></script>
    <script src="vue/Vue.js"></script>
    <script src="vue/axios.js"></script>
</head>
<style>
    #sub{

        position:absolute;
        right:100px;
        bottom:100px;


    }
</style>
<body>
<div id="app" >
    <div style="padding: 100px 100px 10px;">
用户：{{teacher.name}}你好！<br/>
        原密码：<input type="password"  class="form-control" placeholder="原密码" @change="change1()" v-model="before"><p style="color: red">{{message1}}</p><br/>

        新密码：<input type="password" class="form-control" placeholder="以字母开头，长度在6~18之间，只能包含字符、数字和下划线" v-model="after1" @change="change3()" id="newPwd"><p style="color: red">{{message2}}</p><br/>
        确认新密码：<input type="password"  class="form-control" placeholder="和新密码一致" @change="change2()" v-model="after2"><p style="color: red">{{message3}}</p><br/>
<button @click="submit" class="btn btn-primary" id="sub">更改</button><p style="color: red">{{message}}</p>
</div>
</div>
</body>
<script type="text/javascript">

    new Vue({
        el: '#app',
        //固定的结构
        data: { //在data定义变量和初始值
            //定义变量，值空数组
            teacher:'',
            message1:'',
            message2:'',
            message3:'',
            message:'',
            before:'',
            after1:'',
            after2:''

        },
        mounted() {
        var id = window.location.href.split("=")[1];

        var params = new URLSearchParams();
        params.append("id",id);
        axios.post("/teacherInfo/findTeacherInfoById",params)
            .then(res => {
                console.info(res.data);
                this.teacher=res.data;
                console.log(this.teacher);
            });
        },
        methods:{
            change3(){
                var patt=/^[a-zA-Z]\w{5,17}$/;
               if(patt.test(this.after1)){
                   this.message2='格式正确';
               }else {
                   this.message2='格式错误';
               }
            },
            change1(){
                console.log(this.teacher.password+"--"+this.before);
                if (this.before==this.teacher.password){
                    this.message1='密码正确';
                }else {
                    this.message1='密码错误';
                }
            },
            change2(){
                if (this.before==this.teacher.password){
                 if(this.message2='格式正确'){
                     if(this.after1==this.after2){
                         this.message3='密码一致';
                     }else {
                         this.message3='两次密码不一致';
                     }
                 }else {
                     this.message2='请先输入正确的格式';
                 }
                }else {
                    this.message1='请先输入正确的原密码';
                }
            },

            submit(){
                if(this.message3=='密码一致'&&this.message2=='格式正确'&&this.message1=='密码正确'){
                    var params = new URLSearchParams();
                    params.append("tcId",this.teacher.tcId);
                    params.append("password",this.after2);
                    axios.post('/teacherInfo/updateArticleById',params)
                        .then(response =>{//请求成功执行then方法
                            if(response=="1"){
                                this.message="更新失败，请稍后再试";
                            }else{
                                this.message="更新成功";
                            }
                        })
                        .catch(error =>{

                        }) //请求失败执行catch方法
                }else if(this.message3!='密码一致'){
                    this.message1='请先输入正确的原密码';

                }
                else if(this.message3!='格式正确'){
                    this.message2='新密码请先输入正确的格式';
                }else {
                    this.message2='两次密码不一致';
                }



            }
        }
    })
</script>
</html>